<template>
  <div @click="this.$emit('choose')" style="border-radius: 6px;border: grey 3px solid;background-color: antiquewhite">
    <div @click="()=>{if(toggleAble)this.show=!show}" :style="'padding:3px;text-align: left;background-color:'+color "> {{ card.data.name }}</div>
    <el-row style="border: black" v-if="show">
      <el-col :span="8">
        ap{{ card.data.ap }}
      </el-col>
      <el-col :span="8">
        护甲{{ card.data.armor }}
      </el-col>
      <el-col :span="8">
        抵抗{{ card.data.resistance }}
      </el-col>
    </el-row>
    <el-row style="border: black" v-if="show">
      <el-col :span="8">
        力{{ card.data.attribute.pow }}
      </el-col>
      <el-col :span="8">
        速{{ card.data.attribute.spd }}
      </el-col>
      <el-col :span="8">
        体{{ card.data.attribute.phy }}
      </el-col>
      <el-col :span="8">
        智{{ card.data.attribute.int }}
      </el-col>
      <el-col :span="8">
        魅{{ card.data.attribute.cha }}
      </el-col>
      <el-col :span="8">
        魂{{ card.data.attribute.sol }}
      </el-col>

    </el-row>
    <!--双条-->
    <el-row direction="vertical">
      <el-col>
        <div style="display: flex;align-items: end">
          <el-tag :color="stateColor.HP[card.data.HP.status]" effect="dark"
                  size="small">{{ card.data.HP.status }}

          </el-tag>
          <div style="flex-grow: 10;display: flex; flex-direction:column">

            <little-double-max-bar bar-height="10px" :bar-data="card.data.HP"
                                   double-max-color="grew"
                                   :value-color="stateColor.HP[card.data.HP.status]"
                                   :max-color="stateColor.HP[card.data.HP.status]"></little-double-max-bar>
            <little-double-max-bar bar-height="10px" :bar-data="card.data.MP"
                                   double-max-color="grew"
                                   :value-color="stateColor.MP[card.data.MP.status]"
                                   :max-color="stateColor.MP[card.data.MP.status]"></little-double-max-bar>
          </div>
          <el-tag :color="stateColor.MP[card.data.MP.status]" effect="dark"
                  size="small">{{ card.data.MP.status }}
          </el-tag>
        </div>
      </el-col>
      <el-col>

      </el-col>


    </el-row>

  </div>
</template>

<script>
import {Card} from "@/js/card";
import LittleDoubleMaxBar from "@/components/bar/LittleDoubleMaxBar";

export default {
  name: "LittleCard",
  components: {LittleDoubleMaxBar},
  data(){
    return{
      show:false
    }
  },
  emits:['choose'],
  props: {
    card: Card(),
    color: String,
    toggleAble:Boolean,
    showData:Boolean
  },
  computed: {
    stateGroup() {
      return this.$store.state.stateGroup
    },
    stateColor() {
      return this.$store.state.stateGroupColor
    }
  },
  mounted() {
    console.log(this.card)
    if (this.showData)this.show=true
  }
}
</script>

<style scoped>
:deep(.el-tag) {
  border-radius: 0;
}
</style>
